<template>
  <div class="home">
    <div class="heard">
      <div class="heard-left">

        <div><img src="../assets/img/logo.png" alt=""></div>
        <div @click="qiehuan"> <el-icon :size="30" v-if="qie == false">
          <Expand />
          </el-icon>
          <el-icon :size="30" v-else>
        

            <Fold />
          </el-icon>
        </div>
        <div>

          <div v-if="Business" class="Begin">营业中</div>
          <div v-else class="end"> 打烊中</div>
        </div>
      </div>
      <div class="heard-right">

        <div class="center" @click="dialogVisible = true"><el-icon>
            <Timer />
          </el-icon>营业状态设置</div>
        <div>

          <el-dropdown placement="bottom">
            <el-button> {{ name }} </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item class="center">修改密码<el-icon style="margin-left: 5px;">
                    <EditPen />
                  </el-icon></el-dropdown-item>
                <el-dropdown-item class="center" @click="xiaz">退出登录<el-icon style="margin-left: 5px;">
                    <SwitchButton />
                  </el-icon></el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="body">
      <div :class="['body-left', qie ? 'fold' : 'expand']">

        <el-menu background-color="#001529" text-color="#fff" class="el-menu-vertical-demo" router :collapse="qie"
          style="border: 0;">


          <el-menu-item index="/job">
            <el-icon>
              <House />
            </el-icon>
            <span>工作台</span>
          </el-menu-item>

          <el-menu-item index="/dataall">
            <el-icon><Histogram /></el-icon>
            <span>数据统计</span>
          </el-menu-item>

          <el-menu-item index="/lsit">
            <el-icon><List /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="/page-a">
            <el-icon><Goods /></el-icon>
            <span>套餐管理</span>
          </el-menu-item>

          <el-menu-item index="/dish">
            <el-icon><BellFilled /></el-icon>
            <span>菜品管理</span>
          </el-menu-item> -->

          <el-menu-item index="/classify">
            <el-icon><Grid /></el-icon>
            <span>分类管理</span>
          </el-menu-item>

          <el-menu-item index="/emlp">
            <el-icon><Eleme /></el-icon>
            <span>员工管理</span>
          </el-menu-item>


        </el-menu>

      </div>
      <div :class="['body-right', qie ? 'fold' : 'expand']">
        
        <RouterView  style="padding: 30px;  box-sizing: border-box; " />
      
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="营业状态设置" width="300" >
    <el-radio-group v-model="status">
      <el-radio :label="1" border>营业中</el-radio>
      <el-radio :label="2" border>打烊中</el-radio>
    </el-radio-group>
    <div v-if="status === 1" class="dialog-description">
      当前餐厅处于营业状态，自动接收任何订单，点击打烊进入店铺打烊状态。
    </div>
    <div v-if="status === 2" class="dialog-description">
      当前餐厅处于打烊状态，仅接收营业时间内的预定订单，点击营业中手动恢复营业状态。
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" style="background-color: #FFBD05;" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup  >
import { ref, onMounted, reactive, toRefs, watch } from 'vue'
import { House, Histogram, List, Goods, BellFilled, Grid, Eleme,Fold,Expand } from '@element-plus/icons-vue'
const qie = ref(false)


const qiehuan=()=>{
  qie.value = !qie.value
}

</script>

<style  scoped lang="scss">
.boxs {
  width: 268px;

}

.home {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: pink;

  .heard {
    width: 100%;
    height: 10vh;
    background-color: #FFBA02;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;

    .heard-left,
    .heard-right {

      display: flex;
      align-items: center;

      img {
        height: 50px;
      }

      div {
        margin-right: 50px;
      }

      .Begin {
        color: white;
        padding: 5px 10px;
        background-color: red;
      }

      .end {
        color: white;
        padding: 5px 10px;
        background-color: #575B5E;
      }

      box-sizing: border-box;
    }
  }

  .body {
    width: 100%;
    height: 90vh;
    display: flex;

    .body-left {
      width: 15%;
      height: 100%;
      background-color: #001529;
      box-sizing: border-box;

      &.fold {
        width: 64px;
        transition: all 1s;

      }

      &.expand {
        width: 18%;
        transition: all 1s;
      }

    }

    .body-right {
      width: 85%;
      height: 100%;
      background-color: #F4F6F8;
      box-sizing: border-box;
      overflow: auto;


      &.fold {
        width: calc(100% - 64px);
        transition: all 1s;

      }

      &.expand {
        width: 82%;
        transition: all 1s;
      }

    }
  }
}</style>
<style scoped>.dialog-description {
  margin-top: 10px;
  color: #606266;
  font-size: 14px;
}</style>